{extend name="property/public/insidePageBase" /}
{block name="title"}账单详情{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layui-form-pane">
            <div class="layui-row layui-col-space15">
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">基本信息</li>
                        <li>账单日志</li>
                        {if $addBasicAuth}<button type="button" class="layui-btn layui-btn-normal layui-btn-sm data-add-btn addBasic">添加基本费用</button>{/if}
                        {if $addEnergyAuth}<button type="button" class="layui-btn layui-btn-normal layui-btn-sm data-add-btn addEnergy">添加能源费用</button>{/if}
                        {if $addOtherAuth}<button type="button" class="layui-btn layui-btn-normal layui-btn-sm data-add-btn addOther">添加其它费用</button>{/if}
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-row">
                                <div class="layui-col-xs7">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">房间信息</label>
                                        <div class="layui-input-block">
                                            <input type="text" value="{$info['full_room_name']??''}" disabled  placeholder="房间信息" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs5">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">账单编号</label>
                                        <div class="layui-input-block">
                                            <input type="text" value="{$info['number']??'0.0000'}" disabled  placeholder="账单编号" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row layui-form-item">
                                <div class="layui-col-xs4">
                                    <div class="layui-input-group">
                                        <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;&nbsp;&nbsp;应收总额&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                        <input type="text" value="{$info['ar_amount']??'0.0000'}"  disabled  class="layui-input">
                                        <div class="layui-input-split layui-input-suffix"> ¥</div>
                                    </div>
                                </div>
                                <div class="layui-col-xs4">
                                    <div class="layui-input-group">
                                        <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;&nbsp;&nbsp;待收金额&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                        <input type="text" value="{$info['stay_payment_amount']??'0.0000'}"  disabled  class="layui-input">
                                        <div class="layui-input-split layui-input-suffix"> ¥</div>
                                    </div>
                                </div>
                                <div class="layui-col-xs4">
                                    <div class="layui-input-group">
                                        <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;&nbsp;&nbsp;已收金额&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                        <input type="text" value="{$info['check_amount']??'0.0000'}"  disabled  class="layui-input">
                                        <div class="layui-input-split layui-input-suffix"> ¥</div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-group">
                                    <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;&nbsp;&nbsp;账单最晚&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                    <input type="text" value="{$info['cutoff_date']??''}" disabled autocomplete="off" class="layui-input" placeholder="账单逾期天数">
                                    <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;&nbsp;&nbsp;支付，逾期每日收取账单总金额&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                    <input type="text" value="{$info['overdue_fine_fee']??''}" disabled autocomplete="off" class="layui-input" placeholder="账单逾期天数">
                                    <div class="layui-input-split layui-input-suffix"> % 的滞纳金</div>
                                </div>
                            </div>

                            {if $info.overdue_day >= 1}
                            <div class="layui-form-item">
                                <div class="layui-input-group">
                                    <div class="layui-input-split layui-input-prefix">&nbsp;&nbsp;&nbsp;&nbsp;账单己逾期&nbsp;&nbsp;&nbsp;&nbsp;</div>
                                    <input type="text" value="{$info['overdue_day']??''}" disabled autocomplete="off" class="layui-input" placeholder="账单逾期天数">
                                    <div class="layui-input-split layui-input-suffix"> 日共产生</div>
                                    <input type="text" value="{$info['overdue_fine']??''}" disabled autocomplete="off" class="layui-input" placeholder="滞纳金金额">
                                    <div class="layui-input-split layui-input-suffix">¥ 滞纳金, 己催缴次数</div>
                                    <input type="text" value="{$info['urge_num']??''}" disabled autocomplete="off"  class="layui-input" placeholder="滞纳金金额">
                                    <div class="layui-input-split layui-input-suffix"> 次</div>
                                </div>
                            </div>
                            {/if}
                            <table class="layui-hide" id="billCatalogList" lay-filter="billCatalogList"></table>
                            <script type="text/html" id="tableBar">
                                <div class="layui-btn-group">
                                    {if $paymentCustomAuth}<a class="layui-btn layui-btn-sm layui-bg-orange" lay-event="paymentCustomAdd">支付</a>{/if}
                                    {if $editCatalogAuth} <a class="layui-btn layui-btn-sm  layui-btn-normal" lay-event="edit">编辑</a>{/if}
                                    {if $detailCatalogAuth}<a class="layui-btn layui-btn-sm" lay-event="details">详情</a>{/if}
                                    {if $delCatalogAuth}<a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</a>{/if}
                                </div>
                            </script>
                            <script type="text/html" id="cate-name-tpl">
                                {{d.cate_name}}  {{# if(d.is_shared === 1) { }}<span class="layui-badge layui-bg-cyan">公</span>{{# } }}
                            </script>
                            <script type="text/html" id="start-end-date-tpl">
                                {{# if(d.start_date) { }}{{d.start_date}} - {{d.end_date}}{{# } }}
                            </script>
                            <script type="text/html" id="status_tpl">
                                {{# if(d.status === 1) { }}<span class="layui-badge layui-bg-orange">待审核</span>{{# } }}
                                {{# if(d.status === 2) { }}<span class="layui-badge layui-bg-blue">待支付</span>{{# } }}
                                {{# if(d.status === 3) { }}<span class="layui-badge layui-bg-cyan">待确认</span>{{# } }}
                                {{# if(d.status === 4) { }}<span class="layui-badge">已作废</span>{{# } }}
                                {{# if(d.status === 5) { }}<span class="layui-badge layui-bg-black">已逾期</span>{{# } }}
                                {{# if(d.status === 8) { }}<span class="layui-badge layui-bg-blue">支付中</span>{{# } }}
                                {{# if(d.status === 9) { }}<span class="layui-badge layui-bg-green">已完成</span>{{# } }}
                            </script>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">备注说明</label>
                                <div class="layui-input-block">
                                    <textarea placeholder="请输入备注说明" class="layui-textarea" disabled>{$info['remark']??''}</textarea>
                                </div>
                            </div>

                            <div class="layui-tab-item layui-show">
                                <table class="layui-hide" id="roomBillCourseList" lay-filter="roomBillCourseList"></table>
                                <script type="text/html" id="tableroomBillCourseBar">
                                    <div class="layui-btn-group">
                                        <a class="layui-btn layui-btn-sm" lay-event="details">详情</a>
                                    </div>
                                </script>
                                <script type="text/html" id="pay_type_tpl">
                                    {{# if(d.pay_type === 1) { }}<span class="layui-badge layui-bg-reg">线上</span>{{# } }}
                                    {{# if(d.pay_type === 2) { }}<span class="layui-badge layui-bg-blue">线下</span>{{# } }}


                                    {{# if(d.pay_method === 1) { }}<span class="layui-badge layui-bg-orange">微信</span>{{# } }}
                                    {{# if(d.pay_method === 2) { }}<span class="layui-badge layui-bg-blue">支付宝</span>{{# } }}
                                    {{# if(d.pay_method === 3) { }}<span class="layui-badge layui-bg-cyan">银联</span>{{# } }}
                                    {{# if(d.pay_method === 4) { }}<span class="layui-badge layui-bg-green">现金</span>{{# } }}
                                </script>

                                <script type="text/html" id="check_method_tpl">
                                    {{# if(d.check_method === 1) { }}<span class="layui-badge layui-bg-reg">自动</span>{{# } }}
                                    {{# if(d.check_method === 2) { }}
                                    <span class="layui-badge layui-bg-blue">人工</span>
                                    {{d.check_username}}
                                    {{# } }}
                                    {{# if(d.check_type === 1) { }} <span class="layui-badge layui-bg-reg">待审核</span> {{# } }}
                                </script>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <table class="layui-hide" id="billLogList" lay-filter="billLogList"></table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <button type="button" class="layui-btn layui-btn-primary replaceUploadImg toggleUpload" lay-data="{}"></button>
                <button class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use(['form', 'layer','table'], function () {
        var form = layui.form,layer = layui.layer,  $ = layui.$,table = layui.table;
        let billId = {$info['id']};
        let propetryId = {$info['property_id']};
        <!-- 账单日志 add-->
        var tableBillLogListId = 'billLogList';
        table.render({
            elem: '#'+tableBillLogListId,
            id:tableBillLogListId,
            url: '{:url("propertyBillLogList")}?bill_id='+billId,
            cols: [[
                {field: 'add_time', width: 168, title: '创建时间', sort: true},
                {field: 'username', width: 108, title: '执行用户', sort: true},
                {field: 'remark', minWidth: 100, title: '备注说明'},
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 17,
            page: true,
            height: 'full-120'
        });
        <!-- 账单日志 end-->
        <!-- 账单明细 add-->
        var tableId = 'billCatalogList';
        table.render({
            elem: '#'+tableId,
            id:tableId,
            url: '{:url("propertyBillCatalogList")}?bill_id={$info['id']}',
            cols: [[
                {field: 'cate_name', width: 128, title: '费用类别', sort: true, templet:'#cate-name-tpl'},
                {field: 'status', width: 88, title: '状态',  sort: true, templet:'#status_tpl'},
                {field: 'start_end_date_tpl', width: 187, title: '计费周期', sort: true, templet:'#start-end-date-tpl'},
                {field: 'total_amount', width: 98, title: '总 金 额', sort: true},
                {field: 'stay_pay_amount', width: 105, title: '待支付', templet:function(d) {
                        return d.stay_pay_amount + ' ¥';
                    },sort: true},
                {field: 'overdue_fine', width: 98, title: '滞纳金', sort: true},
                {field: 'minus_amount', width: 98, title: '优 惠', sort: true},
                {title: '操作', width: 198, toolbar: '#tableBar', fixed:'right'}
            ]],
        });

        $('.addBasic').on('click', function() {
            var url = '{:url("propertyBillCatalogAddBasic")}?bill_id={$info['id']}';
            var index = layer.open({title: '添加基本费用', type: 2, shade: 0.2,maxmin:true, area:['650px', '600px'], content: url, btnAlign: 'c', btn: ['确定', '取消'], yes: function (index, layero) {
                    var iframeWindow = window['layui-layer-iframe' + index], submit = layero.find('iframe').contents().find("#submitBtn");
                    iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                        var field = data.field; //获取提交的字段
                        var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                        $.post(url, field, function (res) {
                            layer.close(loadAdd);
                            if (res.code === 0) {
                                layer.close(index); //关闭弹层
                                layer.msg(res.msg, {icon: 6, offset: '15px',time: 1000}, function() {
                                    window.location.reload();
                                });
                            } else {
                                layer.msg(res.msg, {icon: 5, offset: '15px'});
                            }
                        });
                    });
                    submit.trigger('click');
                }
            });
        });
        $('.addEnergy').on('click', function() {
            var url = '{:url("propertyBillCatalogAddEnergy")}?bill_id='+billId+'&property_id='+propetryId;
            var index = layer.open({title: '添加能源费用', type: 2, shade: 0.2,maxmin:true, area:['650px', '600px'], content: url, btnAlign: 'c', btn: ['确定', '取消'], yes: function (index, layero) {
                    var iframeWindow = window['layui-layer-iframe' + index], submit = layero.find('iframe').contents().find("#submitBtn");
                    iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                        var field = data.field; //获取提交的字段
                        var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                        $.post(url, field, function (res) {
                            layer.close(loadAdd);
                            if (res.code === 0) {
                                layer.close(index); //关闭弹层
                                layer.msg(res.msg, {icon: 6, offset: '15px',time: 1000}, function() {
                                    window.location.reload();
                                });
                            } else {
                                layer.msg(res.msg, {icon: 5, offset: '15px'});
                            }
                        });
                    });
                    submit.trigger('click');
                }
            });
        });
        $('.addOther').on('click', function() {
            var url = '{:url("propertyBillCatalogAddOther")}?bill_id={$info['id']}';
            var index = layer.open({title: '添加其它费用', type: 2, shade: 0.2,maxmin:true, area:['650px', '600px'], content: url, btnAlign: 'c', btn: ['确定', '取消'], yes: function (index, layero) {
                    var iframeWindow = window['layui-layer-iframe' + index], submit = layero.find('iframe').contents().find("#submitBtn");
                    iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                        var field = data.field; //获取提交的字段
                        var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                        $.post(url, field, function (res) {
                            layer.close(loadAdd);
                            if (res.code === 0) {
                                layer.close(index); //关闭弹层
                                layer.msg(res.msg, {icon: 6, offset: '15px',time: 1000}, function() {
                                    window.location.reload();
                                });
                            } else {
                                layer.msg(res.msg, {icon: 5, offset: '15px'});
                            }
                        });
                    });
                    submit.trigger('click');
                }
            });
        });

        table.on('tool('+tableId+')', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                var url = '{:url("propertyBillCatalogEdit")}?id='+data.id;
                var index = layer.open({
                    title: '编辑账单 ' + data.cate_name + ' 账单', type: 2,  shade: 0.2, maxmin:true, area:['650px', '80%'],content: url, btnAlign: 'c', btn: ['确定', '取消'], yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index], submit = layero.find('iframe').contents().find("#submitBtn");
                        iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                            var field = data.field; //获取提交的字段
                            var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                            $.post(url, field, function (res) {
                                layer.close(loadAdd);
                                if (res.code === 0) {
                                    layer.close(index); //关闭弹层
                                    layer.msg(res.msg, {icon: 6, offset: '15px',time: 1000}, function() {
                                        window.location.reload();
                                    });
                                } else {
                                    layer.msg(res.msg, {icon: 5, offset: '15px'});
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'details') {
                var url = '{:url("propertyBillCatalogDetail")}?catalog_id=' + data.id;
                var index = parent.layer.open({title: data.cate_name + ' 详情 ', type: 2,   shade: 0.2, maxmin: true, shadeClose: true,  move: false, area: ['800px', '100%'],  offset: 'rt',anim: 2, content: url, btn: false});
                return false;
            } else if (obj.event === 'delete') {
                var url = '{:url("propertyBillCatalogDel")}';
                layer.confirm('删除后不可恢复！  是否确认? ', {icon: 3}, function () {
                    var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                    $.post(url, {ids: [data.id]}, function (res) {
                        layer.close(loadAdd);
                        if (res.code === 0) {
                            table.reload(tableId); //数据刷新
                            layer.msg(res.msg, {icon: 6, offset: '15px'});
                        } else {
                            layer.msg(res.msg, {icon: 5, offset: '15px'});
                        }
                    });
                });
            } else if (obj.event === 'paymentCustomAdd') {
                var url = '{:url("propertyBillCatalogPaymentCustom")}?id='+data.id;
                var index = layer.open({
                    title: '账单支付 ' + data.cate_name + ' 账单', type: 2,  shade: 0.2, maxmin:true, area:['650px', '500px'],content: url, btnAlign: 'c', btn: ['确定', '取消'], yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index], submit = layero.find('iframe').contents().find("#submitBtn");
                        iframeWindow.layui.form.on('submit(submitBtn)', function (data) {
                            var field = data.field; //获取提交的字段
                            var loadAdd = layer.msg('提交中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
                            $.post(url, field, function (res) {
                                layer.close(loadAdd);
                                if (res.code === 0) {
                                    layer.close(index); //关闭弹层
                                    layer.msg(res.msg, {icon: 6, offset: '15px',time: 1000}, function() {
                                        window.location.reload();
                                    });
                                } else {
                                    layer.msg(res.msg, {icon: 5, offset: '15px'});
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }
        });
        <!-- 账单明细 end-->

        <!-- 付款记录 add-->
        var tableBillCourseListId = 'roomBillCourseList';
        table.render({
            elem: '#'+tableBillCourseListId,
            id:tableBillCourseListId,
            url: '{:url("propertyBillCourseList")}?bill_id='+billId,
            cols: [[
                {field: 'pay_username', width: 108, title: '付款用户',sort: true},
                {field: 'pay_method', width: 128, title: '支付方式', templet:'#pay_type_tpl', sort: true},
                {field: 'pay_amount', width: 108, title: '支付金额', sort: true},
                {field: 'pay_time', width: 168, title: '支付时间', sort: true},
                {field: 'pay_method', width: 128, title: '审核方式', templet:'#check_method_tpl', sort: true},
                {field: 'check_time', width: 168, title: '确认时间', sort: true},
                {title: '操作', width: 80, toolbar: '#tableroomBillCourseBar', fixed:'right'}
            ]],
        });
        //监听行双击事件
        table.on('rowDouble('+tableBillCourseListId+')', function(obj){
            var data = obj.data;
            var url = '{:url("propertyBillCourseDetail")}?id=' + data.id;
            var index = parent.layer.open({title: data.number +'  支付记录详情', type: 2, shade: 0.2, maxmin:true, shadeClose:true, move:false,area: ['800px', '100%'],offset:  'rt', anim: 2, content: url , btn:false });
            return false;
        });

        table.on('tool('+tableBillCourseListId+')', function (obj) {
            var data = obj.data;
            if (obj.event === 'details') {
                var url = '{:url("propertyBillCourseDetail")}?id=' + data.id;
                var index = parent.layer.open({title: data.number +'  支付记录详情', type: 2, shade: 0.2, maxmin:true, shadeClose:true, move:false,area: ['800px', '100%'],offset:  'rt', anim: 2, content: url , btn:false });
                return false;
            }
        });
        <!-- 付款记录 end-->


    });
</script>
{/block}